<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="template_layui :: header(~{::title},~{::link},~{::style})">
	<title>智眼遥感图像识别系统</title>
</head>
<style>
	.header-center {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		font-size: 22px;
		color: white;
		display: flex;
		align-items: center;
		margin-top: 10px;
	}

	/* 使左右两边的按钮不受居中影响 */
	.side-toggle, .layui-nav.layui-layout-right {
		z-index: 1;
	}
</style>

<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
	<!-- 导航栏 -->
	<div class="layui-header">
		<a href="#" class="layui-logo">
			<span class="layui-logo-lg" style="font-size: 22px;">菜单</span>
		</a>
		<!-- 居中容器 -->
		<div class="header-center">
			<span class="layui-logo-lg">智眼遥感图像识别系统</span>
		</div>
		<!-- 左侧的图标按钮 -->
		<a class="side-toggle layui-layout-left" href="#">
			<i class="layui-icon layui-icon-shrink-right"></i>
			<i class="layui-icon layui-icon-spread-left"></i>
		</a>
		<ul class="layui-nav layui-layout-right">
			<li class="layui-nav-item">
				<a class="timy-screen-full" href="#">
					<i class="fa layui-icon layui-icon-screen-full"></i>
				</a>
			</li>
			<li class="layui-nav-item timy-nav-user">
				<a class="timy-header-nickname" th:text="${user.userName}">SIBO</a>
				<div class="layui-nav-child">
					<div class="timy-nav-child-box">
						<div>
							<a class="open-popup" data-title="个人信息" th:attr="data-url=@{/system/user/profile}" data-size="680,464">
								<i class="fa fa-user-o"></i>个人信息
							</a>
						</div>
						<div><a th:href="@{/logout}"><i class="fa fa-power-off"></i>退出登录</a></div>
					</div>
				</div>
			</li>
		</ul>
	</div>


	<!-- 侧边栏 -->
	<div class="layui-side layui-bg-black">
		<div class="layui-side-scroll">
			<div class="layui-side-user">
				<img class="layui-side-user-avatar" th:src="(${user.avatar} == '') ? @{/img/profile.jpg} : @{/profile/avatar/} + ${user.avatar}" alt="头像">
				<div>
					<p class="layui-side-user-name" th:text="${user.userName}">SIBO</p>
				</div>
			</div>

			<!-- 打印 user.avatar 的信息 -->
<!--			<p th:text="'Avatar: ' + ${user.avatar}">Avatar Info</p>-->

			<!-- 导航区域 -->
			<ul class="layui-nav layui-nav-tree" lay-filter="layui-nav-side">
				<li class="layui-nav-item">
					<a href="javascript:;" lay-url="/system/main">
						<i class="layui-icon layui-icon-home"></i>
						<span class="layui-nav-title">主页</span>
					</a>
				</li>
				<!--=====================-->
				<li class="layui-nav-item layui-nav-itemed" th:each="item:${menus}">
					<a href="javascript:;" th:attr="lay-url=@{${item.url}}">
						<i th:class="${item.icon}"></i>
						<span class="layui-nav-title" th:text="${item.menuName}">一级菜单</span>
					</a>
					<dl class="layui-nav-child" th:if="${item.children.size()}">
						<dd th:each="subItem:${item.children}">
							<a href="javascript:;" th:attr="lay-url=@{${subItem.url}}">
								<span class="layui-nav-title" th:text="${subItem.menuName}">二级菜单</span>
							</a>
						</dd>
					</dl>
				</li>
			</ul>
		</div>
	</div>
	<!-- 主体区域 -->
	<div class="layui-body layui-tab layui-tab-brief" lay-allowclose="true" lay-filter="iframe-tabs">
		<!-- 标签栏 -->
		<ul class="layui-tab-title"></ul>
		<!-- 内容区域 -->
		<div class="layui-tab-content"></div>
	</div>
</div>
<script th:replace="template_layui :: script"></script>
</body>
</html>
